<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>地址管理</title>

		<link href="../../js/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../../js/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="../../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../../css/addstyle.css" rel="stylesheet" type="text/css">
		<script src="../../js/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="../../js/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script src="../../js/vue/vue.min.js"></script>
		<script src="../../js/layer/layer.js" charset="utf-8"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd">
									<a href="/html/home/login.html" target="_top" class="h">${data.name}</a>
									<a href="#" target="_top">免费注册</a>
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
							</div>
							<div class="topMessage my-shangcheng">
								<div class="menu-hd MyShangcheng"><a href="/html/person/index.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
							</div>
							<div class="topMessage mini-cart">
								<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
							</div>
							<div class="topMessage favorite">
								<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
						</ul>
						</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="../../images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
									<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
								</form>
							</div>
						</div>

						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>

		<div class="nav-table">
			<div class="long-title"><span class="all-goods">全部分类</span></div>
			<div class="nav-cont">
				<ul>
					<li class="index"><a href="#">首页</a></li>
					<li class="qc"><a href="#">闪购</a></li>
					<li class="qc"><a href="#">限时抢</a></li>
					<li class="qc"><a href="#">团购</a></li>
					<li class="qc last"><a href="#">大包装</a></li>
				</ul>
				<div class="nav-extra">
					<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
					<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
				</div>
			</div>
		</div>
		<b class="line"></b>

		<div class="center" id="addressListId" >
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-address" >
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<!--隐藏用户id -->
						<input type="hidden" id="userId">
						<hr/>
						<!-- vue遍历list -->
						<ul class=""  v-for="(item,index) in result">
						<input type="hidden" id="addressId">
							<li class="user-addresslist">
								<span class="new-option-r" @click="choiceDefaultAddress"><i class="am-icon-check-circle"></i>设为默认</span>
								<p class="new-tit new-p-re">
								 	<input type="hidden" id="{{item.id}}" ></input>
									<span class="new-txt">{{item.receiveName}}</span>
									<br/>
									<span class="new-txt-rd2">{{item.phone}}</span>
									<br/>
								</p>
								<div class="new-mu_l2a new-p-re"> 
									<p class="new-mu_l2cw">
										<span class="title">{{item.address}}&nbsp &nbsp{{item.detailAddress}}</span>
									</p>
								</div>
								<div class="new-addr-btn">
									<a href="#"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
						</ul>
						<div class="clear"></div>
						   <div class="am-form-group">
								<div class="am-u-sm-9 am-u-sm-push-3">
								   <a class="am-btn am-btn-danger" id="add-btn">添加新的地址</a>
								</div>
						   </div>
					</div>
					
					<div class="clear"></div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有</em>
						</p>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="/html/person/index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li> <a href="/html/person/showInformation.html">个人信息</a></li>
							<li> <a href="/html/person/safety.html">安全设置</a></li>
							<li class="active"> <a href="/html/person/address.html">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li><a href="/html/person/order.html">订单管理</a></li>
							<li> <a href="/html/person/change.html">退款售后</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li> <a href="/html/person/coupon.html">优惠券 </a></li>
							<!--<li> <a href="bonus.html">红包</a></li>-->
							<li> <a href="/html/person/bill.html">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<a href="#">我的小窝</a>
						<ul>
							<li> <a href="/html/person/collection.html">收藏</a></li>
							<li> <a href="/html/person/foot.html">足迹</a></li>
							<li> <a href="/html/person/comment.html">评价</a></li>
							<li> <a href="/html/person/news.html">消息</a></li>
						</ul>
					</li>

				</ul>

			</aside>
		</div>

	</body>
	<script>
	//v-for="(item,index) in result"  for循环  index是列表的序列号,根据index显示页面   {{是占位符}}  #app是id选择器  用数组result显示for循环
	//"@"动态传值
	//创建一个新的Vue类
	// result随意命名,和上边的v-for对应 
	var app = new Vue({
		el : "#addressListId",
		data : {
			result : []
		},
		methods: {
		    choiceDefaultAddress: function (event) {
			  $('.user-addresslist').removeClass("defaultAddr");
		  	  $(event.target).parent('.user-addresslist').addClass("defaultAddr");
		    }
		}
	});

	//查找用户所有收货地址信息
	var showAddressList = function() {
		alert();
		$.ajax({
			type : "POST",
			dataType : "json",
			url : "/address/show",
			success : function(msg) {
				console.log(msg.result);
				app.result = msg.result;//msg.result服务器端传过来的数据    返回数据：json对象
			}
		});
	}
	showAddressList;//调用,运行

	$(document).ready(function(){
		showAddressList();
	});
	
	
	
	//添加收货地址事件 弹出层
	$("#add-btn").on('click', function() {
		layer.open({ //弹出层
			type : 2,
			title : '添加用户',
			fix : false,
			maxmin : true,
			shadeClose : true,
			area : [ '1100px', '600px' ],
			content : 'add_address.html',//弹出层页面html内容，因为只是静态页面，单纯的添加数据
			end : function() {
				showAddressList();//当添加成功后，刷新一下页面  即调用showAddressList这个函数（方法）
			}
		});

	});
	</script>

</html>